<template>
  <!-- 物料的批号列表 -->
  <div class="colorRootview flex-container">
    <!-- 标题栏 -->
    <van-nav-bar class="nav-bar flex-item" id="nav" @click-left="onBackClick" :border="false">
      <font
        color="#477CEC"
        style="font-size:28px;font-weight:400;letter-spacing:1px;"
        slot="title"
      >物料盘点</font>
      <van-icon name="arrow-left" color="black" :size="30" slot="left" />
    </van-nav-bar>
    <div class="divider"></div>

    <van-pull-refresh
      v-model="refreshing"
      @refresh="refresh"
      style="flex: auto;overflow: auto;background-color: white;background-color: #f4f5f6;"
      class="flex-item"
    >
      <van-cell-group class="mineCard flex-item" :border="false">
        <span class="bigText textLeft">{{materialName}}</span>
        <van-row>
          <van-col span="12">
            <span class="whiteText textLeft">盘点/库存:{{checkCount+'/'+totalCount}}</span>
          </van-col>
          <van-col span="12">
            <span class="whiteText textLeft">异常数:{{ambuCount}}</span>
          </van-col>
        </van-row>
      </van-cell-group>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        style="margin-top:15px;"
      >
        <van-row class="card" v-for="item in batchDetailsList" :key="item.batchCode">
          <div style="display:flex">
            <div style="width:100%">
              <van-cell
                :border="false"
                value-class="normalText textLeft"
                title-class="normalText textLeft"
                title="批次号"
                :value="item.batchCode"
                style="padding:5px 5px 5px 5px"
              />

              <van-cell
                :border="false"
                value-class="normalText textLeft"
                title-class="normalText textLeft"
                title="盘点/库存"
                :value="item.checkCount+'/'+item.totalCount"
                style="padding:0 5px 5px 5px"
              />
              <van-cell
                :border="false"
                value-class="normalText textLeft"
                title-class="normalText textLeft"
                title="异常数"
                :value="item.ambuCount"
                style="padding:0 5px 5px 5px"
              />
            </div>
          </div>
        </van-row>
      </van-list>
    </van-pull-refresh>

    <!-- <van-popup v-model="checkCodeDialogShow" :duration="5">
      <van-cell
        :border="false"
        title="批次号:"
        :value="currentBatchDetail.batchCode"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="盘点/库存:"
        :value="currentBatchDetail.checkCount+'/'+currentBatchDetail.totalCount"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="异常数:"
        :value="currentBatchDetail.errorCount"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
    </van-popup>-->
    <van-dialog
      v-model="checkCodeDialogShow"
      title="批次信息"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
    >
      <van-cell
        :border="false"
        title="批次号:"
        :value="currentBatchDetail.batchCode"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="盘点/库存:"
        :value="currentBatchDetail.checkCount+'/'+currentBatchDetail.totalCount"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
      <van-cell
        :border="false"
        title="异常数:"
        :value="currentBatchDetail.ambuCount"
        title-class="cellTitle-dialog"
        value-class="cellValue-dialog"
      />
    </van-dialog>
    <div class="flex-item">
      <van-button class="roundButton" type="default" @click="onBackClick">关闭</van-button>
    </div>
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
import { Dialog } from "vant";
import Toast from "@/utils/toast";
import consts from "@/utils/consts";
export default {
  name: "MaterialRequisition",
  data() {
    return {
      planId: 0,
      planName: "",
      startDate: "",
      endDate: "",
      state: 99,

      materialId: 0,
      barCode: 0,
      materialName: "",
      totalCount: 0,
      checkCount: 0,
      ambuCount: 0,
      batchDetailsList: [],
      currentBatchDetail: {},

      loading: false,
      finished: false,
      refreshing: false,
      checkCodeDialogShow: false,
      intervalId: 0
    };
  },
  methods: {
    showBatchInfoDialog() {
      this.checkCodeDialogShow = true;
      clearTimeout(this.intervalId);
      this.intervalId = setTimeout(() => {
        this.checkCodeDialogShow = false;
      }, 5000);
    },
    onBackClick() {
      // this.barCodeScanBatchInventory("20190820000067");
      this.$router.push({
        path: "/inventoryDetail",
        query: {
          id: this.planId,
          name: this.planName,
          startDate: this.startDate,
          endDate: this.endDate,
          state: this.state
        }
      });
    },
    refresh() {
      this.getBatchInfo(this.barCode);
    },
    getBatchInfo(barCode) {
      let params = {
        planId: this.planId,
        code: barCode,
        materialId: this.materialId
      };
      http
        .fetchGet(api.getCheckInfo, params, "正在验证...")
        .then(data => {
          if (data) {
            this.batchDetailsList = data.batchDetails;
            this.finished = true;
            this.refreshing = false;
            this.loading = false;
            this.materialName = data.materialName;
            this.totalCount = data.totalCount;
            this.checkCount = data.checkCount;
            this.ambuCount = data.ambuCount;
          } else {
            // Toast.fail("没有此条形码的信息");
          }
        })
        .catch(err => {
          this.finished = true;
          this.refreshing = false;
          this.loading = false;
        });
    },
    showRequisitionDetail(index) {
      let requisition = this.requisitionList[index];
      this.$router.push({
        path: "/outOfStorageList",
        query: {
          applyCode: requisition.applyCode
        }
      });
    },
    barCodeScanBatchInventory(code) {
      this.checkScan(code);
    },
    //扫码盘库接口
    checkScan(code) {
      let params = {
        planId: this.planId,
        code: code,
        materialId: this.materialId
      };
      http
        .fetchPost(api.checkStockCheck, params, "正在验证...")
        .then(data => {
          if (data) {
            if (this.materialId == 0) {
              this.materialId = data.materielId;
              //获取到物料ID后，拉取这个物料批号列表
              this.getBatchInfo(this.barCode);
            } else {
              this.updateBatchInfo(data.isOk, data.batchCode);
              this.showBatchInfoDialog();
            }
            // this.checkCodeDialogShow = true;
          } else {
            // Toast.fail("没有此条形码的信息");
          }
        })
        .catch(err => {
          Dialog.confirm({
            message: err
          })
            .then(() => {
              // on close
              this.initData();
              this.checkScan(code);
            })
            .catch(() => {
              // on cancel
            });
        });
    },
    initData() {
      this.materialId = 0;
      this.materialName = "";
      this.totalCount = 0;
      this.checkCount = 0;
      this.ambuCount = 0;
      this.batchDetailsList = [];
      this.currentBatchDetail = {};
    },
    //扫码后显示此条形码的批号的信息
    updateBatchInfo(isOk, batchCode) {
      // let index = -1;
      // for (let i = 0; i < this.batchDetailsList.length; i++) {
      //   if (this.batchDetailsList[i].batchCode == batchCode) {
      //     index = i;
      //     break;
      //   }
      // }
      // if (index == -1) {
      // } else {
      //   if (isOK) {
      //     this.currentBatchDetail.checkCount++;
      //     this.checkCount++;
      //   } else {
      //     this.currentBatchDetail.errorCount++;
      //     this.errorCount++;
      //   }
      // }
      this.currentBatchDetail = this.batchDetailsList.find(item => {
        return item.batchCode == batchCode;
      });
      if (isOk) {
        this.currentBatchDetail.checkCount++;
        this.checkCount++;
      } else {
        this.currentBatchDetail.ambuCount++;
        this.ambuCount++;
      }
    }
  },
  created() {
    this.planId = this.$route.query.planId;
    this.materialId = this.$route.query.materialId;
    this.barCode = this.$route.query.barCode;
    this.planName = this.$route.query.planName;
    this.startDate = this.$route.query.startDate;
    this.endDate = this.$route.query.endDate;
    this.state = this.$route.query.state;

    //没有物料ID，则获取获取
    if (!this.materialId) {
      this.checkScan(this.barCode);
    } else {
      //获取到物料ID后，拉取这个物料批号列表
      this.getBatchInfo(this.barCode);
    }

    window.barCodeScanBatchInventory = this.barCodeScanBatchInventory;
  },
  beforeDestroy() {
    window.barCodeScanBatchInventory = null;
  }
};
</script>

<style lang="scss" scoped>
.divider {
  height: 1px;
  width: 100%;
  background-color: #e6e6e6;
}
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex-item:nth-child(1),
.flex-item:nth-child(2),
.flex-item:nth-child(4) {
  flex-shrink: 0;
  flex-grow: 0;
}
.flex-item:nth-child(3) {
  flex-shrink: 1;
  flex-grow: auto;
  overflow: auto;
}
.nav-bar {
  background-color: white;
  flex-grow: 0;
  flex-shrink: 0;
}
.colorRootview {
  width: 100%;
  height: 100vh;
  background-color: #f4f5f6;
  background-size: cover;
}
.mineCard {
  width: 100%;
  height: auto;
  background-color: white;
  padding: 10px;
  background-size: cover;
}
.van-cell__title {
  width: 40%;
  flex: none;
}
.card {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #cccccc;
  margin-left: 5px;
  margin-right: 5px;
  background-color: white;
  width: auto;
  padding: 5px;
}

.bigText {
  display: block;

  font-size: 26px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 37px;
  letter-spacing: 1px;
}
.whiteText {
  display: block;

  font-size: 24px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 33px;
  letter-spacing: 1px;
}

.normalText {
  // font-weight: 600;
  // font-size: 15px;
  // color: black;
  display: block;

  font-size: 24px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  line-height: 33px;
  letter-spacing: 1px;
}

.textLeft {
  text-align: left;
}
.transparentBG {
  background: transparent;
}
.待处理 {
  color: #ff6666;
  //   text-align: center;
}
.待审批 {
  color: #ff6666;
  //   text-align: center;
}
.已完成 {
  color: #00ff66;
  //   text-align: center;
}
.roundButton {
  // width: 90%;
  // margin: 10px;
  // color: #704ae0;

  width: 480px;
  height: 60px;
  background: rgba(71, 124, 236, 1);
  font-size: 26px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 45px;
  letter-spacing: 1px;
}
.cellTitle-dialog {
  width: 30%;
  text-align: left;
}
.cellValue-dialog {
  width: 70%;
  text-align: left;
  margin-right: 10px;
}
</style>

